<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"/>
    <title>高德地图</title>
    <!-- 高德地图样式 -->
    <link rel="stylesheet" href="框架组件/demo-center.css"/>
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/gao_de_mao.css"/>
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/right.css">
    <link rel="stylesheet" href="css/login.css">

</head>

<body>

<!-- 地图 -->
<div id="container"></div>

<!-- 地图右下角操作 -->
<div class="input-card" id="map_rb" style="width: 300px">
    <label style="color: black; font-weight: bold">地图操作：</label>
    <div class="input-item">
        <input id="locate" type="button" class="btn" onclick="locate()" value="当前定位"
               style="font-size: 13px; margin-right: 10px;"/>
        <input id="addRadius" type="button" class="btn" onclick="addRadius()" value="增加检索半径"
               style="font-size: 13px; margin-right: 10px;"/>
        <input id="reduceRadius" type="button" class="btn" onclick="reduceRadius()" value="减少检索半径"
               style="font-size: 13px;"/>
    </div>
</div>

<!-- 右侧详情 -->
<div id="right">
    <!--头像-->
    <div id="head_portrait">未登录</div>
    <!--LOGO-->
    <div id="logo"></div>
    <!--选项卡容器-->
    <div id="sidebar">
        <div id="title">详情说明：</div>
        <!---->
        <div id="scale_level">当前缩放等级：</div>
        <div id="center_point">中心点经纬度：</div>
        <!---->
        <div id="radius">当前检索范围：600米</div>
        <div id="count">检索地点数量：0个</div>
    </div>

    <!--店家选项卡-->
    <div id="items">
        <div class="item">
            <div class="icon"></div>
            <div class="name">
                <div class="row1">地点</div>
                <div class="row2">设备描述</div>
                <div class="row3">距离XX米</div>
            </div>
        </div>
    </div>

</div>

<!--蒙版-->
<div class="overlay" id="overlay"></div>
<!--登录-->
<div class="login-popup" id="loginPopup">
    <div class="login-container">
        <h2>用户登录</h2>
        <form>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" placeholder="请输入用户名" required>

            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="请输入密码" required>

            <label id="login_status" style="height: 15px; line-height: 15px;"></label>

            <div id="login_btn">
                <button id="login_button" type="button" onclick="login()">登录</button>
                <div class="null"></div>
                <button id="login_back" type="button" onclick="closeLoginPopup()">取消登录</button>
            </div>
        </form>
    </div>
</div>

<!--鼠标悬浮，提示用户信息-->
<div id="user_info_hover_div">
    余额：?
</div>


<!-- 高德地图相关 -->
<script src="框架组件/maps.js"></script>
<script src="框架组件/demoutils.js"></script>
<script src="框架组件/maps2.js"></script>

<!-- 自定义 -->
<script src="js/_var.js"></script>
<script src="js/http.js"></script>
<script src="js/data.js"></script>
<script src="js/gao_de_map.js"></script>
<!-- 初始化 -->
<script src="js/_init.js"></script>

<!-- 自定义 -->
<script>
    const scale_level = document.getElementById('scale_level'); /*缩放等级*/
    const center_point = document.getElementById('center_point'); /*中心点经纬度*/
    const radius = document.getElementById('radius'); /*检索范围*/
    const count = document.getElementById('count'); /*检索到的地点数量*/
    const head_portrait = document.getElementById('head_portrait'); /*头像*/

    function _() {
        scale_level.innerHTML = `当前缩放等级：<strong>${map_resize}</<strong>`
        center_point.innerHTML = `中心点经纬度：<strong>${map_center[0]}, ${map_center[1]}</<strong>`
        radius.innerHTML = `当前检索范围：<strong>${map_search_radiusM}</<strong>米`
        count.innerHTML = `检索地点数量：<strong>${map_search_count}</<strong>个`

        // 选择所有具有 class 为 "icon" 的元素
        const icons = document.querySelectorAll('.icon');
        // 循环遍历每个 icon 元素
        for (let i = 0; i < icons.length; i++) {
            // 修改背景样式，这里以红色为例
            icons[i].style.backgroundImage = `url('图片资源/room_img${i + 1}.png')`
        }

        // 遍历所有item绑定点击事件
        const items = document.getElementsByClassName("item")
        for (let i = 0; i < items.length; i++) {
            items[i].addEventListener("click", function (e) {
                goto(e)
            })
        }
    }

    _()

    /* UI重新加载 */
    functions.change = () => {
        map_search_count = 0
        add_item = []
        for (let i = 0; i < http_tmp_data.length; i++) {
            let j = getDistanceBetweenPoints([http_tmp_data[i].longitude, http_tmp_data[i].latitude], map_default)
            // console.log("距离：", j)
            if (j <= map_search_radiusM) {
                map_search_count += 1
                // console.log(http_tmp_data[i])
                add_item.push({
                    address: http_tmp_data[i].address,
                    x: http_tmp_data[i].longitude,
                    y: http_tmp_data[i].latitude,
                    length: parseInt(j).toFixed(0)
                })
            }
        }
        // 排序
        add_item.sort((a, b) => a.length - b.length);
        // 遍历items, 加上图片
        const items = document.getElementById('items');
        items.innerText = '';
        const static_data = [
            {
                dev_name: "九阳京东自营旗舰店点菜柜",
                dev_desc: "九阳（Joyoung）5L大容量3~10人电饭锅智能预约多功能大功率加热五层厚釜不粘黄晶内胆5升饭煲F-50FZ810"
            },
            {
                dev_name: "美的京东自营官方旗舰店点菜柜",
                dev_desc: "美的（Midea）智能电饭锅家用4L可拆蒸汽阀24H预约蒸煮米饭锅FB40simple111（3-8人）"
            },
            {
                dev_name: "老板电器京东自营旗舰店点菜柜",
                dev_desc: "老板（Robam）抽烟灶套装免拆洗侧吸21大风量燃气灶家用吸灶具27A3H套装天然气"
            },
            {
                dev_name: "摩飞京东自营旗舰店点菜柜",
                dev_desc: "摩飞电器（Morphyrichards）多功能锅家用多用途锅电火锅电煮锅电热锅2.5升火锅锅MR9088英石红"
            },
            {
                dev_name: "美的京东自营官方旗舰店点菜柜",
                dev_desc: "美的（Midea）电火锅电炒锅家用多功能电锅煎烤电热电煮锅6L火锅不粘烤鱼DY3030Easy101"
            },
        ]
        for (let i = 0; i < add_item.length; i++) {
            // console.log(123, add_item[i])
            items.innerHTML += `
            <div class="item">
                <div class="icon"></div>
                <div class="name">
                    <div class="row1">${add_item[i].address}</div>
                    <div class="row2">${static_data[i].dev_name}&nbsp;&nbsp;距离${add_item[i].length}米</div>
                    <div class="row3">${static_data[i].dev_desc}</div>
                </div>
            </div>`
        }
        _()
    }

    async function f() {
        // eslint-disable-next-line no-undef
        http_tmp_data = await http_get_room_all()
        // console.log(http_tmp_data)

        for (let i = 0; i < http_tmp_data.length; i++) {
            addMarker([http_tmp_data[i].longitude, http_tmp_data[i].latitude])
        }
        functions.change()
    }

    f()

    // 登录操作
    head_portrait.addEventListener('click', () => {
        // console.log("登录")

        // 1.添加蒙版 显示登录页面
        document.getElementById('overlay').style.display = 'block';
        document.getElementById('loginPopup').style.display = 'block';
        document.body.style.overflow = 'hidden'; // 禁止页面滚动
    })

    function closeLoginPopup() {
        document.getElementById('overlay').style.display = 'none';
        document.getElementById('loginPopup').style.display = 'none';
        document.body.style.overflow = 'auto'; // 恢复页面滚动
    }

    var flag_login = false;

    function login() {
        // 登录操作
        const username = document.getElementById('username');
        const password = document.getElementById('password');
        const login_status = document.getElementById('login_status');

        if (username.value === "user" && password.value === "123456") {

            username.value = ''
            password.value = ''

            // 成功登录
            login_status.style.color = 'green'
            login_status.innerText = "登录成功";
            setTimeout(() => {
                login_status.innerText = ''
                // 去除蒙版
                closeLoginPopup()
                // 更换头像
                head_portrait.style.backgroundImage = 'url("图片资源/头像.png")'
                head_portrait.innerText = ''
            }, 500)

            // console.log("更换头像")
            // 登录成功
            flag_login = true;

        } else {
            login_status.style.color = 'red'
            login_status.innerText = "登录失败";
            setTimeout(() => {
                login_status.innerText = ''
            }, 1000)
            username.value = ''
            password.value = ''
        }
    }

    /*用户信息*/
    const user_info_hover_div = document.getElementById('user_info_hover_div');
    head_portrait.addEventListener('mouseover', function (e) {


        user_info_hover_div.style.display = 'block';
        var tooltipWidth = user_info_hover_div.offsetWidth;
        var tooltipHeight = user_info_hover_div.offsetHeight;
        var windowWidth = window.innerWidth;
        var leftPos = e.clientX + 10;
        var topPos = e.clientY + 10;
        // 检查右侧是否超出窗口宽度，若超出则向左偏移
        if (leftPos + tooltipWidth > windowWidth) {
            leftPos = windowWidth - tooltipWidth - 10;
        }
        // 更新提示框位置
        user_info_hover_div.style.top = topPos + 'px';
        user_info_hover_div.style.left = leftPos + 'px';

        if (flag_login === false) {
            return;
        }

        /*发请求*/
        const tmp = user_money;
        http_get_user_money("小李")
        setTimeout(() => {
            user_info_hover_div.innerText = `余额：${user_money}`
        }, 500);
        user_info_hover_div.innerText = `余额：${tmp}`
    });

    head_portrait.addEventListener('mouseout', function () {
        user_info_hover_div.style.display = 'none';
    });

    function goto(e) {
        console.log("点击了", e)
        // 跳转到...
        window.location.href = 'http://localhost:5173/payMoney'
    }

</script>
</body>
</html>

